<template>

  <div>
    <div class="all_box">
      <div class="count_box">
        <div class="count">
          <img :src="require('@/assets/png/user.png')" width="150px"/>
          <div class="sta">
            <h2>用户数:{{ userCount }}</h2>
            <h2>管理员:{{ adminCount }}</h2>
          </div>
        </div>
        <div class="count">
          <img :src="require('@/assets/png/order.png')" width="150px"/>
          <div class="sta">
            <h2>订单数:{{ orderCount }}</h2>
            <h2>已支付:{{ logCount }}</h2>
          </div>
        </div>

        <div class="count">
          <img :src="require('@/assets/png/plane.png')" width="150px"/>
          <div class="sta">
            <h2>普通航班:{{ baseCount }}</h2>
            <h2>转程航班:{{ transferCount }}</h2>
            <h2>联程航班:{{ connectingCount }}</h2>
          </div>
        </div>
      </div>
       <div class="chart_box">
         <Bar/>
         <Pie/>
       </div>
    </div>


  </div>

</template>
<script>


import infolist from '@/api/staInfo.js'
import Bar from "../../components/Bar";
import Pie from "../../components/Pie";

export default {
  components: {
    Bar,Pie
  },
  data() {
    return {
      userCount: '',
      adminCount: '',
      orderCount: '',
      logCount: '',
      baseCount: '',
      transferCount: '',
      connectingCount: ''

    }
  },
  created() {
    this.getUserCount()
    this.getAdminCount()
    this.getOrderCount()
    this.getLogCount()
    this.getBaseCount()
    this.getTransferCount()
    this.getConnectingCount()


  },

  methods: {


    getUserCount() {
      infolist.getUserCount()
        .then(response => {
          this.userCount = response.data.userCount
        })
    }
    ,
    getAdminCount() {
      infolist.getAdminCount()
        .then(response => {
          this.adminCount = response.data.adminCount
        })
    }
    ,
    getLogCount() {
      infolist.getLogCount()
        .then(response => {
          this.logCount = response.data.logCount
        })
    }
    ,
    getOrderCount() {
      infolist.getOrderCount()
        .then(response => {
          this.orderCount = response.data.orderCount
        })
    }
    ,

    getBaseCount() {
      infolist.getBaseCount()
        .then(response => {
          this.baseCount = response.data.baseCount
        })
    }
    ,
    getTransferCount() {
      infolist.getTransferCount()
        .then(response => {
          this.transferCount = response.data.transferCount
        })
    }
    ,
    getConnectingCount() {
      infolist.getConnectingCount()
        .then(response => {
          this.connectingCount = response.data.ConnectingCount
        })
    }
  }
}

</script>
<style lang="less" less>

.all_box {
  display: flex;
  /*总布局向下*/
  flex-direction: column;

  .count_box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .count {
      margin: 30px;
      border-top: 50px;
      background-color: #fff5f5;
      width: 400px;
      height: 200px;
      display: flex;
      align-items: center;

      img {
        margin-left: 20px;

      }
      .sta {
        color: #288df6;
        margin-left: 20px;
        margin-bottom: 20px;
        flex-direction: column
      }
    }
  }
  .chart_box{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }


}





</style>
